<script lang="ts" setup>
import type { FileInfo as FileItem } from '#/api/openapi';

import { computed } from 'vue';

import { getFileIcon } from '#/utils/icon';

interface Props {
  /** 要预览的文件信息 */
  fileData?: FileItem;
  /** 是否显示预览 */
  visible?: boolean;
  /** 分享码 (用于获取预览URL) */
  shareCode?: string;
}

interface Emits {
  /** 关闭预览 */
  (e: 'close'): void;
  /** 更新显示状态 */
  (e: 'update:visible', value: boolean): void;
}

const props = withDefaults(defineProps<Props>(), {
  fileData: undefined,
  visible: false,
  shareCode: '',
});

const emit = defineEmits<Emits>();

const isVisible = computed({
  get: () => props.visible,
  set: (value: boolean) => emit('update:visible', value),
});

const handleClose = () => {
  isVisible.value = false;
  emit('close');
};

const handleBackdropClick = () => {
  handleClose();
};

const handleContentClick = (event: Event) => {
  event.stopPropagation();
};
</script>

<template>
  <!-- 预览模态框 -->
  <div
    v-if="isVisible && fileData"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
    @click="handleBackdropClick"
  >
    <div
      class="max-h-[90vh] max-w-[90vw] rounded-lg bg-white p-6 dark:bg-gray-800"
      @click="handleContentClick"
    >
      <div class="mb-4 flex items-center justify-between">
        <h3 class="text-lg font-semibold">
          <div class="flex items-center">
            <component
              :is="getFileIcon(fileData.fileName)"
              class="mr-2 text-blue-600"
            />
            <span>
              {{ fileData.fileName }}
            </span>
          </div>
        </h3>
        <button
          @click="handleClose"
          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          aria-label="关闭预览"
        >
          <svg
            class="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>

      <!-- 预览内容区域 -->
      <div class="min-h-[200px] text-center text-gray-500 dark:text-gray-400">
        <slot name="content" :file="fileData">
          <p class="mt-4">文件预览功能开发中...</p>
        </slot>
      </div>

      <!-- 操作按钮区域 -->
      <div v-if="$slots.actions" class="mt-4 flex justify-end gap-2">
        <slot name="actions" :file="fileData" :close="handleClose"></slot>
      </div>
    </div>
  </div>
</template>
